<template>
    <div class="vd_left_box" ref="vd_height" :style="{'width':max_width}">
        <!-- muted -->
        <video ref="videos" class="tsgz-video" :src="src" controls="controls" muted autoplay type="video/mp4"  @ended="playNextVideo()">
            您的浏览器不支持 video 标签。
        </video>
        <div class="countNumer" v-if="isShow">
            <el-progress width="110" type="circle" color="#4475FF" :percentage="count*10" :format="format"></el-progress>
        </div>
    </div>
</template>

<script>
export default {
    props: ["src","count","isShow"],
    components: {},
    name: "",
    data() {
        return {
            max_width: null,
        };
    },
    created() {},
    mounted() {
        var that = this;
        let vd_height = that.$refs.vd_height.clientHeight;
        let vd_width = 0.5625 * vd_height;
        that.max_width = vd_width + "px";
        window.onresize = () => {
            return (() => {
                let vd_height = that.$refs.vd_height.clientHeight;
                let vd_width = 0.5625 * vd_height;
                that.max_width = vd_width + "px";
            })();
        };
    },
    watch: {},
    beforeDestroy() {},
    methods: {
        getData() {
            this.$nextTick(() => {
                const videos = this.$refs.videos;
                videos.play();
            });
        },
        playNextVideo() {
            this.$emit("playNextVideo");
        },

        format(p){
            return (p/10)+'s'
        }
    },
};
</script>


<style scoped>
.vd_left_box{
    position: relative;
}
.tsgz-video {
    height: 100%;
    width: 100%;
    border-radius: 20px;
    flex-shrink: 0;
}
.countNumer{
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: rgba(0, 0, 0, .5);
}
/deep/ .el-progress__text{
    color: #fff;
    font-size: 0.3rem !important;
}
/deep/ .countNumer .el-progress{
    position: absolute;
    top: 30px;
    right: 30px;
}
</style>


